<template>
    <div class="my-container">
        <div v-if="user" class="header user-info">
            <div class="base-info">
                <div class="left">
                    <van-image class="avatar" :src="userInfo.photo" round fit="cover"/>
                <span class="name">{{userInfo.name}}</span>
                </div>
                <div class="right">
                    <van-button size="mini" round to="/user/profile">编辑资料</van-button>
                </div>
            </div>
            <div class="data-stats">
                <div class="data-item">
                    <span class="count">{{userInfo.art_count}}</span>
                    <span class="text">头条</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.fans_count}}</span>
                    <span class="text">关注</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.follow_count}}</span>
                    <span class="text">粉丝</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.like_count}}</span>
                    <span class="text">获赞</span>
                </div>
            </div>
       </div>

       <div v-else class='header not-login'>
            <div class="login-btn" @click="$router.push('/login')">
                <img class="moblie-img" src="~@/assets/mobile.png" alt="">
                <span class="text">登录/注册</span>
            </div>
       </div>


        <van-grid class="grid-nav" :column-num="2" clickable>
            <van-grid-item class="grid-item" icon="star-o" text="收藏" />
            <van-grid-item class="grid-item" icon="underway-o" text="历史" />
        </van-grid>

        <van-cell title="消息通知" is-link />
        <van-cell title="小智同学" is-link class="cell-xz"/>
        <van-cell v-if="user" title="退出登录" class="logout-cell" clickable @click="onLogout"/>


        <div class="box" style="height:100px">

        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { showConfirmDialog } from 'vant'
import { getUserInfo } from '@/apis/user'

export default {
    created() {
        if (this.user) {
            this.loadUserInfo()
        }
    },
    data() {
        return {
            userInfo:{}
        }
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        onLogout() {
            showConfirmDialog({
            title: '温馨提示',
            message:
                '您确定要退出当前账号吗？',
            })
            .then(() => {
                this.$store.commit('setUsers',null)
            })
            .catch(() => {
                // on cancel
            });
        },
        async loadUserInfo() {
           
           try {
            const { data: res } = await getUserInfo()
            console.log(res);
            this.userInfo = res.data
           } catch (error) {
                // showFailToast('获取数据失败' + error.message)
           }
           
        }
    }
}
</script>
<style lang="less" scoped>

    .my-container {
        .header {
            height: 361px;
            background: url("~@/assets/banner.png");
            background-size: cover;
        }
        .not-login {
            display: flex;
            justify-content: center;
            align-items: center;
            .login-btn {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .moblie-img {
                    width: 100px;
                    height: 100px;
                }
                .text {
                    color: #fff;
                    font-size: 22px;
                    margin-top: 15px;
                }
                
            }

        }

        .user-info {
            .base-info {
                height: 231px;
                padding: 38px 16px 16px;
                background: url('~@/assets/banner.png') ;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    display: flex;
                    align-items: center;
                    .avatar {
                        width: 62px;
                        height: 62px;
                        margin-right: 12px;
                        border: 1px solid #fff;
                    }
                    .name {
                        font-size:15px;
                        color: white;
                    }
                }
            }
            .data-stats {
                display: flex;
                .data-item {
                    height: 130px;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    .count {
                        font-size: 36px;
                    }
                    .text {
                        font-size: 23px;
                    }
                }
            }
            
            
        }
        .cell-xz {
            margin-bottom: 9px;
        }
        .logout-cell {
            text-align: center;
        }
    }


    
</style>